<template>
    <div class="header">
        <div class="header-return"
        v-show="showHeader">
            <span class="border-return"></span>
            <span class="iconfont return" @click="toHome">&#xe660;</span>
        </div>
        <div class="header-top"
        v-show="!showHeader"
        :style="styleOpactity"
        >
            <div class="header-left">
                <span class="iconfont" @click="toHome">&#xe660;</span>
            </div>
            北京国际鲜花港
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            showHeader:true,
            styleOpactity:{
                opacity:0,
            }
        }
    },
    mounted(){
        let This = this
        window.addEventListener("scroll",function(){
            let top =document.documentElement.scrollTop;
            if(top>45){
                let opacity =top/130;
                opacity = opacity>1?1:opacity
                This.styleOpactity={opacity}
                This.showHeader=false;
            }else{
                This.showHeader=true
            }
        })
    },
    methods:{
    toHome(){
        this.$router.push("/")
    }
    }
}
</script>
<style scoped>
.header{
    
}
.header-return{
    position: absolute;
    left: .1rem;
    top:.1rem;
    /* z-index: 10; */
    width: .52rem;
    height: .52rem;
    /* opacity: .5; */
    /* background: #000; */
    /* margin: .15rem .2rem; */
    /* background: rgba(5, 127, 133, 0.626); */
}
 .border-return{
    display: block;
    width: .72rem;
    height: .72rem;
    border-radius: .36rem;
    opacity: .5;
    background: #000;
   
}
.return{
    position: absolute;
    left: 0;
    top:0;
    color: #fff;
    width: .72rem;
    line-height: .72rem;
    text-align: left;
    text-indent: .18rem;
    font-size: .32rem;
    font-weight: bold;
}

.header-top{
    position: fixed;
    top: 0;
width: 100%;
text-align: center;
line-height: .88rem;
background: #21cde1;
color: #fff;
font-size: .36rem;
/* display: flex; */

}
.header-left{
    position: absolute;
    /* top: 0; */
    width: .4rem;
    padding: 0 .2rem;
    text-align: center;
    font-weight: bold;
}
</style>